<template>
  <div>
    <div class="topic"></div>
    <!-- 登录 -->
    <transition name="van-fade">
      <div class="login" v-show="lovisible" v-if="lovisible">
        <h3>登录</h3>
        <van-form @submit="loginonSubmit">
          <van-field
            center
            clearable
            v-model="loEmamil"
            type="email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            :rules="[{ required: true, message: '请填写邮箱号' }]"
          />
          <van-field
            center
            clearable
            v-model="lopassword"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round type="info" native-type="submit">提交</van-button
            ><van-button round type="warning">重置</van-button>
            <p class="textzhu" @click="gozhuce">没有账号？点击注册</p>
          </div>
        </van-form>
      </div>
    </transition>
    <!-- 注册 -->
    <transition name="van-fade">
      <div class="login" v-show="revisible" v-if="revisible">
        <h3>注册</h3>
        <van-form @submit="rejesteronSubmit">
          <van-field
            maxlength="18"
            clearable
            center
            v-model="reusername"
            name="userName"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />

          <van-field
            @blur="emailrule"
            center
            clearable
            v-model="reEmail"
            type="email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            :rules="[{ required: true, message: '请填写邮箱号' }]"
            :error-message="errmeeage"
          />
          <van-field
            maxlength="18"
            center
            clearable
            v-model="repassword"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round type="info" native-type="submit" :disabled="disab"
              >提交</van-button
            ><van-button round type="warning" @click="rechong">重置</van-button>
            <p class="textzhu godeng" @click="godenglu">已有账号？点击登录</p>
          </div>
        </van-form>
      </div>
    </transition>
  </div>
</template>

<script>
import $ from "jquery";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  name: "ToutiaoLogin",

  data() {
    return {
      lovisible: true,
      revisible: false,
      loEmamil: "",
      lopassword: "",
      // 注册
      reusername: "",
      reEmail: "",
      repassword: "",
      disab: true,
      errmeeage: "",
    };
  },

  mounted() {},

  methods: {
    async emailrule() {
      let data = {
        email: this.reEmail,
      };

      const { data: res } = await this.$http.get("/api/common/email", {
        params: data,
      });
      //console.log(res);
      if (res.message === "邮箱已注册") {
        this.disab = true;
        this.errmeeage = res.message;
      } else {
        this.disab = false;
        this.errmeeage = "";
      }
    },

    async loginonSubmit(values) {
      const { data: res } = await this.$http.post("/api/login/pc", values);
      //console.log(res);
      if (res.code !== 200) {
        Toast("登录失败");
      } else {
        Toast("登录成功");
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("id", res.data.user.userId);

        this.$router.push({ name: "my" });
      }
    },

    async rejesteronSubmit(values) {
      const { data: res } = await this.$http.post(
        "/api/login/registry",
        values
      );
      //console.log(res);
      if (res.code !== 200) {
        Toast("注册失败");
      } else {
        Toast("注册成功");
        this.loEmamil = this.reEmail;
        this.lopassword = this.repassword;
        $(".godeng").click();
      }
    },

    //   "/api/login/registry", {
    //   email: this.reEmail,
    //   password: this.repassword,
    //   userName: this.reusername,
    // });
    gozhuce() {
      this.revisible = true;
      this.lovisible = false;
    },
    godenglu() {
      this.revisible = false;
      this.lovisible = true;
    },
    rechong() {
      this.$refs.reRef.resetValidation();
    },
  },
};
</script>

<style lang="less" scoped>
.topic {
  background: url("./img/top_bg.png") top left no-repeat;
  background-size: 100%;
  width: 100%;
  height: 200px;
}
.login {
  margin-top: 30px;
  padding: 0px 20px;
  h3 {
    text-align: center;
    margin-bottom: 5px;
  }
}
.van-field {
  margin: 10px 0px;
  border-radius: 20px;
}
.textzhu {
  font-size: 12px;
  color: #666;
  padding-top: 10px;
}
.van-button {
  padding: 0px 40px;
  margin: 0px 20px;
}
</style>